<?php
include('../includes/header.php');
?>

<script type="text/javascript" src="js/swfobject.js"></script> 
<script type="text/javascript" src="js/lamo.js"></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
<div class="slider-blk clearfix">
    <div id="glow">
      <img height="222" width="550" alt="" src="css/img/fade_grad.png">
    </div>
            <div class="slider1">
              <h3><a href="access_covers.html">Access Covers</a></h3>
              <div class=" jcarousel-skin-tango"><div style="position: relative; display: block;" class="jcarousel-container jcarousel-container-vertical"><div style="position: relative;" class="jcarousel-clip jcarousel-clip-vertical"><ul style="overflow: hidden; position: relative; top: -21.5729px; margin: 0px; padding: 0px; left: 0px; height: 1441px;" id="mycarousel" class="jcarousel-list jcarousel-list-vertical">
                <li jcarouselindex="-197" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item--197 jcarousel-item--197-vertical"><img src="images/img1.jpg" alt="" height="144" width="184"></li><li jcarouselindex="-196" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item--196 jcarousel-item--196-vertical"><img src="images/img2.jpg" alt="" height="144" width="184"></li><li jcarouselindex="-195" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item--195 jcarousel-item--195-vertical"><img src="images/img3.jpg" alt="" height="144" width="184"></li><li jcarouselindex="1" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical"><img src="images/img1.jpg" alt="" height="144" width="184"></li>
                <li jcarouselindex="2" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-2 jcarousel-item-2-vertical"><img src="images/img2.jpg" alt="" height="144" width="184"></li>
                <li jcarouselindex="3" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-3 jcarousel-item-3-vertical"><img src="images/img3.jpg" alt="" height="144" width="184"></li>
                <li jcarouselindex="4" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-4 jcarousel-item-4-vertical"><img src="images/img1.jpg" alt="" height="144" width="184"></li>
                <li jcarouselindex="5" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-5 jcarousel-item-5-vertical"><img src="images/img2.jpg" alt="" height="144" width="184"></li>
                <li jcarouselindex="6" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-6 jcarousel-item-6-vertical"><img src="images/img3.jpg" alt="" height="144" width="184"></li>
              </ul></div><div disabled="false" style="display: block;" class="jcarousel-prev jcarousel-prev-vertical"></div><div disabled="false" style="display: block;" class="jcarousel-next jcarousel-next-vertical"></div>
              </div>
              </div>
            </div>
            <!-- .slider1 -->
            <div class="slider2">
              <h3><a href="about.html">Slotdrain</a> </h3>
              <div class=" jcarousel-skin-tango"><div style="position: relative; display: block;" class="jcarousel-container jcarousel-container-vertical"><div style="position: relative;" class="jcarousel-clip jcarousel-clip-vertical"><ul style="overflow: hidden; position: relative; top: -22.0694px; margin: 0px; padding: 0px; left: 0px; height: 1441px;" id="mycarousel1" class="jcarousel-list jcarousel-list-vertical">
                <li jcarouselindex="-197" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item--197 jcarousel-item--197-vertical"><img src="images/img4.jpg" alt="" height="143" width="184"></li><li jcarouselindex="-196" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item--196 jcarousel-item--196-vertical"><img src="images/img5.jpg" alt="" height="143" width="184"></li><li jcarouselindex="-195" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item--195 jcarousel-item--195-vertical"><img src="images/img6.jpg" alt="" height="143" width="184"></li><li jcarouselindex="1" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical"><img src="images/img4.jpg" alt="" height="143" width="184"></li>
                <li jcarouselindex="2" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-2 jcarousel-item-2-vertical"><img src="images/img5.jpg" alt="" height="143" width="184"></li>
                <li jcarouselindex="3" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-3 jcarousel-item-3-vertical"><img src="images/img6.jpg" alt="" height="143" width="184"></li>
                <li jcarouselindex="4" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-4 jcarousel-item-4-vertical"><img src="images/img4.jpg" alt="" height="143" width="184"></li>
                <li jcarouselindex="5" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-5 jcarousel-item-5-vertical"><img src="images/img5.jpg" alt="" height="143" width="184"></li>
                <li jcarouselindex="6" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-6 jcarousel-item-6-vertical"><img src="images/img6.jpg" alt="" height="143" width="184"></li>
              </ul></div><div disabled="false" style="display: block;" class="jcarousel-prev jcarousel-prev-vertical"></div>
              <div disabled="false" style="display: block;" class="jcarousel-next jcarousel-next-vertical"></div>
              </div>
              </div>
            </div>
            <!-- .slider2 -->
          </div>
          <div class="clear"></div>
          <div class="homecontent">
          <h3>Welcome to Gatic</h3>
          <p>Gatic is internationally renowned for the manufacture and 
supply of innovative gas and air-tight access covers and surface water 
drainage systems to the construction, transport and utility markets. The
 company's worldwide reputation has been established over one hundred 
years of providing quality products and performance on prestigious 
projects across the globe.</p>
          <p class="last">With international offices, production 
facilities and distributors located throughout the world, the Gatic 
range has become the leading global brand for access and surface 
drainage systems.</p>
<div id="basic-modal-content">
           <h2> Please Select </h2>
           <form action="#" >
			<ul class="selectopt">
            <li><label>Gatic Covers</label><input name="gatic" id="gatic_cover" type="radio" value="" ></li>
            <li><label>Gatic Slotdrain</label><input name="gatic" id="gatic_slotdrain" type="radio" value="" ></li>

            </ul>
            </form>
		</div>
</div>
        </div>
        
        <div class="clear"></div>
        <div class="testimonial">
          <div class="blk gray mr40">
            <h3>Latest News</h3>
            <img src="images/blk1.jpg" alt="" height="142" width="176"> </div>
          <div class="blk green">
            <h3>Case studies</h3>
            <img src="images/blk2.jpg" alt="" height="142" width="176"> </div>
          <div class="blk yellow last">
            <h3>Testimonials</h3>
            <img src="images/blk3.jpg" alt="" height="142" width="176"> </div>
        </div>
        <div class="clear"></div>
        
<script>
$(document).ready(function(){
    jQuery('#mycarousel').jcarousel({
		vertical: true,
		scroll: -1,
		auto: 1,
		wrap: 'circular',
		animation: 2000
	});		
	jQuery('#mycarousel1').jcarousel({
		vertical: true,
		scroll: -1,
		auto: 1,
		wrap: 'circular',
		animation: 2000										
	});
})
</script>        
<?php
include('../includes/footer.php');
?>